// 设置页面
import React from 'react'
import { useNavigate } from 'react-router-dom';
import { NavBar, Toast } from 'react-vant';
import s from './style.module.less'
import { useStore, observer } from '@/store'

const Setting = () => {
    const navigate = useNavigate()
    const { userStore } = useStore()

    const changeLoginState = () => {   // 点击退出登录或者点击登录
        if (userStore.isLogin) {
            userStore.changeLogin(false)
            Toast.info('注销成功！')
            navigate('/user')
        } else {
            navigate('/login')
        }
    }

    const changeInfo = () => {
        if (userStore.isLogin) {
                navigate('/userInfo')
        } else {
            Toast.info('请登录')
        }
    }
    const changeName = () => {
        if (userStore.isLogin) {
                navigate('/userName')
        } else {
            Toast.info('请登录')
        }
    }

    return (
        <div className={s.main}>
            <NavBar
                title='设置'
                onClickLeft={() => navigate(-1)}
            />
            <div className={s.update}>
                <div className={s.updateName} onClick={() => changeInfo('/userInfo')}>
                    <div className={s.left}>修改头像</div>
                    <div className={s.arrow}></div>
                </div>
            </div>
            <div className={s.update}>
                <div className={s.updateName} onClick={() => changeName('/userName')}>
                    <div className={s.left}>修改昵称</div>
                    <div className={s.arrow}></div>
                </div>
            </div>

            <div className={s.update}>
                <div className={s.updateName} onClick={() => changeLoginState()}>
                    <div className={s.left} >{userStore.isLogin ? '退出登陆' : '点击登录'}</div>
                    <div className={s.arrow}></div>
                </div>
            </div>
        </div>
    )
}
export default observer(Setting) 
